<!--
 * @Author: 淹死De鱼5 happyjing5@sina.cn
 * @Date: 2024-03-16 01:53:16
 * @LastEditors: 淹死De鱼5 happyjing5@sina.cn
-->
<!--  -->
<template>
  <el-dialog v-bind="$attrs" title="承接人选择" :visible.sync="visibleComputed" width="750px" @close="cancel" append-to-body>
    <el-table v-loading="tableLoading" :data="tableList" @row-click="singleElection">
      <el-table-column width="55" label="选择">
        <template slot-scope="scope">
          <el-radio class="table-display-none" v-model="selectTableId" :label="scope.row.assigneeMember"></el-radio>
        </template>
      </el-table-column>
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column label="姓名" align="center" prop="mbExpName" width="150" />
      <el-table-column label="昵称" align="center" prop="assigneeNickName" width="150" />
      <el-table-column label="手机号" align="center" prop="mbExpPhoneNumber" width="150" />
      <el-table-column label="申请时间" align="center" prop="createTime"/>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getMemberList"
    />
    <div slot="footer" class="dialog-footer">
      <el-button :loading="isLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getApplyMemberList, selectApplyMember } from "@/api/reward/posted.js"
export default {
  dicts: ['check_task_status'],
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: String | Number,
      default: ''
    }
  },
  data () {
    return {
      // 选择当前行的id
      selectTableId:'',
      // 选择当前行的数据
      selectTableRow: [],
      isLoading: false,
      tableLoading: false,
      tableList:[
        // {id:0,mbExpName:'和',memberNickName:'breeze',memberPhone:'15988887777',createTime:'2022-05-05'},
        // {id:1,mbExpName:'和1',memberNickName:'breeze1',memberPhone:'123456789',createTime:'2022-05-05'}
      ],
      total: 0,
      form: {},
      // 表单校验
      rules: {
        contactStatus: [
          { required: true, message: "状态不能为空", trigger: "blur" }
        ],
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  computed: {
    visibleComputed: {
      get() {
        if (this.visible) {
          this.getMemberList()
        }
        return this.visible
      },
      set(value) {
        return this.$emit('update:visible', value)
      }
    }
  },
  mounted() {
    
  },
  methods: {
    // 获取承接人列表
    getMemberList() {
      const postData = {
        ...this.queryParams,
        assigneePosted: this.id
      }
      console.log(postData)
      getApplyMemberList(postData).then(response => {
        this.tableList = response.rows;
        this.total = response.total;
        this.loading = false;
        console.log(response)
      })
    },
    singleElection(row) {
      this.selectTableId = row.assigneeMember
      this.selectTableRow = this.tableList.filter((item) => item.assigneeMember === row.assigneeMember)
      console.log(`该行的编号为${row.assigneeMember}`)
    },
    submitForm() {
      const el = this
      const postData = {
        assigneePosted :this.id,
        assigneeMember:this.selectTableId
      }
      console.log(postData)
      if (el.isLoading) return
      el.isLoading = true
      selectApplyMember(postData).then(res => {
        this.$modal.msgSuccess("选择成功");
        this.cancel()
      }).finally(() => {
        el.isLoading = false
      })
      
      
    },
    selectHandle() {
      
    },
    cancel() {
      this.selectTableId = ''
      this.selectTableRow = []
      this.tableList = []
      this.$emit('update:visible', false)
    }
  }
}
</script>
<style lang='scss'>
.table-display-none{
  .el-radio__label{
    display: none;
  }
}
</style>
